<div class="container-fluid">

    <form>
        <div class="form-group">
            <label for="app-name"  class="control-label">系统名称：</label>
            <input type="text" class="form-control" id="app-name" value="${.sets.app_name}">
        </div>

        <div class="form-group">
            <label for="app-name"  class="control-label">站点配色：</label>
            <ul class="list-group dropdown-menu-right" data-stoppropagation="true">
                <li class="list-group-item "><p >主题</p></li>
                <li class="list-group-item drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" >
                    <label for="site_theme_1" class="control-label"></label>
                  </span>
                    <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2" ></label>
                  </span>
                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                    <span>
                    <input type="radio" name="site_theme" value="site_theme_4" id="site_theme_4">
                    <label for="site_theme_4"></label>
                  </span>
                    <span>
                    <input type="radio" name="site_theme" value="site_theme_5" id="site_theme_5">
                    <label for="site_theme_5"></label>
                  </span>
                    <span>
                    <input type="radio" name="site_theme" value="site_theme_6" id="site_theme_6">
                    <label for="site_theme_6"></label>
                  </span>
                    <span>
                    <input type="radio" name="site_theme" value="site_theme_7" id="site_theme_7">
                    <label for="site_theme_7"></label>
                  </span>
                    <span>
                    <input type="radio" name="site_theme" value="site_theme_8" id="site_theme_8">
                    <label for="site_theme_8"></label>
                  </span>
                </li>
                <li class="list-group-item  control-label"><p>LOGO</p></li>
                <li class="list-group-item drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" >
                    <label for="logo_bg_1"></label>
                  </span>
                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                </li>
                <li class="list-group-item  control-label"><p>头部</p></li>
                <li class="list-group-item drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" >
                    <label for="header_bg_1"></label>
                  </span>
                    <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
                    <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
                    <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
                    <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
                    <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                </li>
                <li class="list-group-item  control-label"><p>侧边栏</p></li>
                <li class="list-group-item drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" >
                    <label for="sidebar_bg_1"></label>
                  </span>
                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                </li>
            </ul>
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-primary"  id="submit-sets">确定</button>
        </div>
    </form>

</div>
<script>

    $(function (){



      let app={

         hBgObj:$('input[name=header_bg]'),
         lBgObj:$('input[name=logo_bg]'),
         sBgObj:$('input[name=sidebar_bg]'),
        tBgObj:$('input[name=site_theme]'),
        appNameObj:$('#app-name'),
        init:function (){
            let self=this,
                hBg='${.sets.header_bg}',
                sBg='${.sets.logo_bg}',
                lBj='${.sets.logo_bg}',
                tBg="${.sets.site_theme}";

            if(!hBg){
              hBg="default";
            }
            if(!sBg){
              sBg="default"
            }
            if(!lBj){
              lBj="default"
            }
            if(!tBg){
              tBg="default"
            }
            self.lBgObj.filter('input[value='+lBj+']').prop('checked',true);
            self.hBgObj.filter('input[value='+hBg+']').prop('checked',true);
            self.sBgObj.filter('input[value='+sBg+']').prop('checked',true);
            self.tBgObj.filter('input[value='+tBg+']').prop('checked',true);
            self.event();

        },
        event:function (){

          let self=this;
          $('#submit-sets').click(function (){
            doPost("/admin/setting/setmap",{
                "app_name":self.appNameObj.val(),
                "header_bg":self.hBgObj.filter(":checked").val(),
                "logo_bg":self.lBgObj.filter(":checked").val(),
                "sidebar_bg":self.sBgObj.filter(":checked").val(),
                "site_theme":self.tBgObj.filter(":checked").val(),
            })

          });
        }

      };
      app.init();




    });

</script>
